<template>
  <div class="contend-item">
    <div class="banner-item-list">
      <div class="banner-item" v-for="(item, index) in list" :key="index">
        <div>36万个评分</div>
        <div class="banner-item-center" :class="{ 'item-noBoder': index == list.length - 1 }">
          4.9
        </div>
        <div>娱乐</div>
      </div>
    </div>
  </div>
</template>

<script setup>
let list = [1, 2, 3, 4, 2, 3, 4]
</script>

<style>
.contend-item {
  margin-top: 18px;
}
.banner-item-list {
  display: flex;
  border-top: 1px solid #c6c6c8;
  border-bottom: 1px solid #c6c6c8;
  overflow: scroll;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.banner-item {
  color: #b1b1b4;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 14px 0px 10px 0px;
  text-align: center;
}
.banner-item-center {
  font-weight: bold;
  font-size: 20px;
  color: #8e8e93;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0px 38px;
  border-right: 1px solid #c6c6c8;
  padding: 6px 0px 6px 0px;
}
.item-noBoder {
  border-right: none;
}
</style>
